<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VIP</title>
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="css/image.css"/>
    <link rel="stylesheet" href="css/vip_css.css"/>
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/vip_js.js"></script>
    <script src="js/rcookie.js"></script>
    <script src="js/util.js"></script>

    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
</head>
<body>
<div class="base_contain">
    <!--头像, 用户信息-->
    <div style="display: flex;">
        <img src="http://avatorimg.klgwl.com/151157400101519_s_1020x900.jpg"
             class="round_image base_selector_padding"/>
        <div style="padding-top: 4px; padding-left: 8px">
            <div>
                <span>Y2<img src="image/icon_xiaohuangguan_vip.png" class="vip_ico"/></span>
            </div>
            <div><span>描述描述描述描述描述描述描述描述描述述描述描述描述</span></div>
            <hr class="base_h_line"/>
        </div>
    </div>
    <!--月份选择-->
    <div style="display: flex">
        <a class="vip_item" href="javascript:void(0)">
            <span class="base_block  vip_item_text">0.01元</span>
            <img class="base_block vip_item_line" src="image/icon_fengexian_vip.png"/>
            <span class="base_block vip_item_desc">1个月</span>
            <img class="vip_selected" src="image/icon_xuanzhong_vip.png"/>
        </a>
        <a class="vip_item" href="javascript:void(0)">
            <span class="base_block  vip_item_text">0.02元</span>
            <img class="base_block vip_item_line" src="image/icon_fengexian_vip.png"/>
            <span class="base_block vip_item_desc">3个月</span>
            <img class="vip_selected" src="image/icon_xuanzhong_vip.png"/>
        </a>
        <a class="vip_item" href="javascript:void(0)">
            <span class="base_block  vip_item_text">0.03元</span>
            <img class="base_block vip_item_line" src="image/icon_fengexian_vip.png"/>
            <span class="base_block vip_item_desc">6个月</span>
            <img class="vip_selected" src="image/icon_xuanzhong_vip.png"/>
        </a>
    </div>

    <a href="javascript:void(0)" class="vip_button">立即开通</a>

    <hr class="vip_line2"/>

    <div class="vip_left_right_line_wrapper">
        <span class="vip_left_right_line"></span>
        <span>VIP会员特权</span>
        <span class="vip_left_right_line"/></span>
    </div>

    <div class="vip_grid">
        <div class="vip_grid_item">
            <img class="vip_hb" src="image/vip/icon_hongbaolingqu_vip.png"/>
            <span class="vip_grid_item_text1">红包领取上限2</span>
            <span class="vip_grid_item_text2">非会员上限1</span>
        </div>
        <div class="vip_grid_item">
            <img class="vip_hb" src="image/vip/icon_jianqun_vip.png"/>
            <span class="vip_grid_item_text1">建群上限4</span>
            <span class="vip_grid_item_text2">非会员上限3</span>
        </div>
        <div class="vip_grid_item">
            <img class="vip_hb" src="image/vip/icon_qunrenshu_vip.png"/>
            <span class="vip_grid_item_text1">群人数4</span>
            <span class="vip_grid_item_text2">非会员3</span>
        </div>
        <div class="vip_grid_item">
            <img class="vip_hb" src="image/vip/icon_fangke_vip.png"/>
            <span class="vip_grid_item_text1">查看全部访客</span>
            <span class="vip_grid_item_text2">非会员3</span>
        </div>
        <div class="vip_grid_item">
            <img class="vip_hb" src="image/vip/icon_songlongzuan_vip.png"/>
            <span class="vip_grid_item_text1">送龙钻1</span>
            <span class="vip_grid_item_text2"></span>
        </div>
        <div class="vip_grid_item">
            <img class="vip_hb" src="image/vip/icon_zhuanshubiaozhi_vip.png"/>
            <span class="vip_grid_item_text1">专属标志</span>
            <span class="vip_grid_item_text2"></span>
        </div>
        <div class="vip_grid_item">
            <img class="vip_hb" src="image/vip/icon_simiyouxi_vip.png"/>
            <span class="vip_grid_item_text1">私密游戏</span>
            <span class="vip_grid_item_text2">专属的私密房间</span>
        </div>
    </div>

    <!--<div class="vip_grid1 debug3">-->
    <!--<div style="display: block">a</div>-->
    <!--<div>b</div>-->
    <!--<div>c</div>-->
    <!--<div>d</div>-->
    <!--<div>e</div>-->
    <!--</div>-->

    <!--<div class="vip_grid2 debug2">-->
    <!--<div style="display: block">a</div>-->
    <!--<div>b</div>-->
    <!--<div>c</div>-->
    <!--<div>d</div>-->
    <!--<div>e</div>-->
    <!--</div>-->
    <!--...end-->
</div>
</body>
</html>